<template>
	<div :class="headIos?'report_container-ios':'report_wrapper'">
			<div class="menu_wrapper" ref="selectItem">
				<ul>
					<li :class="{'currentt':currentIndex===0}" @click="selectMenu(0,$event)">
						<div class="detail_img">
							<div class="icon"></div>
						</div>
						<div class="detail_text">身份认证</div>
					</li>
					<li :class="{'currentt':currentIndex===1}" @click="selectMenu(1,$event)">
						<div class="detail_img_telephone">
							<div class="icon"></div>
						</div>
						<div class="detail_text">手机认证</div>
					</li>
					<li :class="{'currentt':currentIndex===2,'scurcrime':curcrime}" @click="selectMenu(2,$event)">
						<div class="detail_img_crime">
								<div :class="showCrime?'redBlack':'side-fixed'">
									<div class="icon"></div>
								</div>
						</div>
						<div class="detail_text detail_text_img">社会不良</div>
					</li>
					<li :class="{'currentt':currentIndex===3}" @click="selectMenu(3,$event)">
						<div class="detail_img_remark">
							<div class="icon"></div>
						</div>
						<div class="detail_text">职说评价</div>
					</li>
					<li :class="{'currentt':currentIndex===4,'height_none':selectSchool!==true}" @click="selectMenu(4,$event)">
						<div v-if="selectSchool">	
							<div class="detail_img_school">
								<div class="icon"></div>
							</div>
							<div class="detail_text">学历验证</div>
						</div>
					</li>
					<li :class="{'currentt':currentIndex===5 , 'height_none':selectJob!==true}" @click="selectMenu(5,$event)">
						<div v-if="selectJob">
							<div class="detail_img_job">
								<div class="icon"></div>
							</div>
							<div class="detail_text">职业资格</div>
						</div>
					</li>
					<li :class="{'currentt':currentIndex===6}" class="height_none" @click="selectMenu(6,$event)">
						<div class="detail_img_security" v-if="false">
							<div class="icon"></div>
						</div>
						<div class="detail_text" v-if="false">上海社保</div>
					</li>
					<li :class="{'currentt':currentIndex===7,'height_none':selectBusiness!==true}" @click="selectMenu(7,$event)">
						<div v-if="selectBusiness">	
							<div class="detail_img_business">
								<div class="icon"></div>
							</div>
							<div class="detail_text">个人工商</div>
						</div>
					</li>
					<li :class="{'currentt':currentIndex===8,'height_none':selectExcuted!==true}" @click="selectMenu(8,$event)">
						<div v-if="selectExcuted">	
							<div class="detail_img_executed">
								<div :class="showExcuted?'redExcuted':''">
									<div class="icon"></div>
								</div>
							</div>
							<div class="detail_text">被执行人</div>
						</div>
					</li>
					<li :class="{'currentt':currentIndex===9,'height_none':selectBlack!==true}" @click="selectMenu(9,$event)">
						<div v-if="selectBlack">
							<div class="detail_img_black">
								<div :class="showBlack?'redBlack':''">
									<div class="icon"></div>
								</div>
							</div>
							<div class="detail_text">网贷黑名单</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="details_list" ref="detailsList">
				<ul>
					<li class="list-hook"><shenfen :shenfen="shenfen" v-if="showdetail"></shenfen></li>
					<li class="list-hook"><tele :tele="tele" v-if="showdetail"></tele></li>
					<li class="list-hook"><crime :crime="crime" v-if="showdetail"></crime></li>
					<li class="list-hook">
						<div v-if="showdetail">
							<idenheader leftTitle="职说评价" rightData="数据来自萝卜猎手"></idenheader>
							<remark @clickshow="showless"  v-for="item in totalComments" :key="item.companyName" :replyList="item"></remark>
							<div v-if="noRemark" class="mo_mark">未查询到工作评价</div>
						</div>
					</li>
					<li class="list-hook" :class="{'nopadding':selectSchool!==true}"><school :school="school" v-if="showdetail && selectSchool"></school></li>
					<li class="list-hook" :class="{'nopadding':selectJob!==true}"><job :job="job" v-if="showdetail && selectJob"></job></li>
					<li class="list-hook nopadding"><security :security="security" v-if="false" ></security></li>
					<li class="list-hook" :class="{'nopadding':selectBusiness!==true}"><business :business="business" v-if="showdetail && selectBusiness"></business></li>
					<li class="list-hook" :class="{'nopadding':selectExcuted!==true}"><excuted :excuted="excuted" v-if="showdetail && selectExcuted"></excuted></li>
					<li class="list-hook" :class="{'nopadding':selectBlack!==true}"><black :black="black" :blackReportType="blackReportType" v-if="showdetail && selectBlack"></black></li>
					<li class="list-hook" ><div class="nbsp"></div></li>
				</ul>
			</div>
		</div>
	
</template>

<script>
	import BScroll from 'better-scroll';
	import shenfen from './shenfen';
	import tele from './tele';
	import crime from './crime';
	import remark from './remark';
	import school from './school';
	import job from './job';
	import security from './security';
	import business from './business';
	import excuted from './excuted';
	import black from './black';
	import idenheader from '../common/idenheader';
	import { Confirm, TransferDomDirective as TransferDom } from 'vux'
	export default {
		data(){
			return{
				listHeight: [],
        		scrollY: 0,
        		showdetail:false,
        		shenfen:{},
        		tele:{},
        		crime:{},
        		job:{},
        		security:{},
        		business:{},
        		excuted:{},
        		black:{},
        		currentCompany:{},
        		otherCompany:{},
        		noCommentList:{},
        		totalComments:[],
        		selectSchool:false,
        		selectJob:false,
        		selectBusiness:false,
        		selectExcuted:false,
        		selectBlack:false,
						curcrime:false,
						showCrime:false,
						showBlack:false,
						showExcuted:false,
						headIos:false,
						noRemark:false,
						blackReportType:'',
			}
		},
		components:{
			Confirm,
			shenfen,
			tele,
			crime,
			remark,
			school,
			job,
			security,
			business,
			excuted,
			black,
			idenheader
		},
		mounted(){
		    this.sellprice = this.$route.query.id; 
		},
		computed: {
			currentIndex() {
		        for (let i = 0; i < this.listHeight.length; i++) {
		            let height1 = this.listHeight[i];
		            let height2 = this.listHeight[i + 1];
		            if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
		            	let foodList = this.$refs.selectItem.getElementsByTagName('li');
				        let el = foodList[i];
				        this.menuScroll.scrollToElement(el, 300);
		            	return i;
		            }
		        }
	        	return 0;
	        },
		},
		created() {
			if (window.navigator.userAgent.indexOf('LBLSIOS') > -1) {
				this.headIos = true
			} else {
				this.headIos = false
			};
			this.$nextTick(() => {
	            this._initScroll();
	            this.handleDetails();
	        });
		},
		props:['datadetails'],
		methods:{
			_initScroll() {
				let selectItem = this.$refs.selectItem;
				this.menuScroll = new BScroll(selectItem,{
					click:true,
				});
				let detailsList = this.$refs.detailsList;
				this.detailsList = new BScroll(detailsList,{
					click:true,
					probeType: 3,
				});
				this.detailsList.on('scroll', (pos) => {
		          this.scrollY = Math.abs(Math.round(pos.y));
		      });
		        this.calculateHeight();
			},
			selectMenu(index,event){
				let foodList = this.$refs.detailsList.getElementsByClassName('list-hook');
		        let el = foodList[index];
		        this.detailsList.scrollToElement(el, 300);
			},
			calculateHeight() {
				this.listHeight = [];
		        let detList = this.$refs.detailsList.getElementsByClassName('list-hook');
		        let height = 0;
		        this.listHeight.push(height);
		        for (let i = 0; i < detList.length; i++) {
		        	if(i==0){
		        		let item = detList[i];
			            height =height + item.clientHeight +15;
			            this.listHeight.push(height);
		        	}else{
		        		let item = detList[i];
			            height =height + item.clientHeight;
			            this.listHeight.push(height);
		        	}
		            
		        }
		        // console.log(this.listHeight)
		    },
		    showless(){
		   		var that = this;
		   		
		   		this.$nextTick(() => {
	            	that.menuScroll.refresh();
	            	that.detailsList.refresh();
	            })
	            setTimeout(function(){
		   			that.calculateHeight();
		   		},1000)
//		   		setTimeout(function(){
//		   			that.calculateHeight();
//		   		},1000)
		   		
		    },
		    handleDetails() {
		        //身份认证姓名 手机验证 姓名 手机号
		        var that = this;
//	            console.log(that.datadetails.creditNotifyModel,1111)
	            that.shenfen.name = that.datadetails.resCreditReport;
	            that.shenfen.info = that.datadetails.creditNotifyModel.idCardPhotoResult.idCardPhoto;
	            that.tele= that.datadetails.creditNotifyModel;
	            that.crime= that.datadetails.creditNotifyModel.personBadInfoResult;
	            that.school = that.datadetails.creditNotifyModel.educationResult;
	            that.job = that.datadetails.creditNotifyModel.professionalCertsResult;
	            that.security = that.datadetails.creditNotifyModel.socialSecurityResult;
	            that.excuted = that.datadetails.creditNotifyModel.executedResult;
	            that.business = that.datadetails.creditNotifyModel.entInfoResult;
	            that.black = that.datadetails.creditNotifyModel.p2pBlackResult;
	            that.totalComments = that.datadetails.currentCompany.concat(that.datadetails.otherCompany).concat(that.datadetails.noCommentList);
							that.showdetail=true;
							that.blackReportType = that.datadetails.resCreditReport.reportType;
							//是否有异常记录。
							// console.log(that.business,8796)
							if (that.totalComments.length < 2) {
								if(that.totalComments[0].currentCompanyComment.length==0){
									that.noRemark=true;
								}
							} 
							if (that.crime.personBadInfo.caseTime.length > 0) {
								that.showCrime = true;
							}
							if (that.black.p2pBlackList.length > 0) {
								that.showBlack = true;
							}
							if (that.excuted.executedList.length > 0) {
								that.showExcuted = true;
							}
	            if(that.school.selected==='true'){
	            	that.selectSchool=true;
	            }
	            if(that.excuted.selected==='true'){
	            	that.selectExcuted=true;
	            }
	            if(that.business.selected==='true'){
	            	that.selectBusiness=true;
	            }
	            if(that.black.selected==='true'){
	            	that.selectBlack=true;
	            }
	            if(that.job.selected==='true'){
	            	that.selectJob=true;
	            }
	            if(that.crime.personBadInfo.caseTime.length){
	            	that.curcrime = true;
	            }
	            // console.log(that.selectSchool,11)
	            // console.log(that.school.selected==='true',11)
	            // console.log(that.excuted.selected==='true',11)
	            // console.log(that.business.selected==='true',22)
	            // console.log(that.black.selected==='true',33)
	            // console.log(that.job.selected==='true',44)
	            // console.log(that.totalComments,55)
	            this.$nextTick(() => {
	            	that.menuScroll.refresh();
	            	that.detailsList.refresh();
	            })
	            setTimeout(function(){
		   			that.calculateHeight();
		   		},1000);
//		   		console.log(that.datadetails.currentCompany,211);
//		   		console.log(that.datadetails.noCommentList,222);
//		   		console.log(that.datadetails.otherCompany,233);
//		   		console.log(that.datadetails.currentCompany.concat(that.datadetails.noCommentList).concat(that.datadetails.otherCompany),24);
//	            console.log(that.datadetails.creditNotifyModel.executedResult,111);
	            //身份认证  出生日期 户口发证地 是否通过验证 "mobileResult.msg ==='一致'"
	            //console.log(this.datadetails.creditNotifyModel.idCardPhotoResult.idCardPhoto,2)
	            //手机验证 是否通过验证 "mobileResult.msg ==='一致'"
	            //console.log(this.datadetails.creditNotifyModel.mobileAuthResult.mobileAuth,3)
	            //犯罪记录
	            //console.log(this.datadetails.creditNotifyModel.personBadInfoResult,4)
	            //当前公司评价以及其他公司评价
//	            console.log(this.datadetails.currentCompany,5)
//	            console.log(this.datadetails.otherCompany,6)
	            //学历认证 "educationStatus!='SUCCESS'" 未查到最高学历
//	            console.log(this.datadetails.creditNotifyModel.educationResult,7)
	            //学历认证信息
//	            console.log(this.datadetails.creditNotifyModel.educationResult,8)
	            //资格认证状态
	            //console.log(this.datadetails.creditNotifyModel.professionalCertsResult.queryState,9.1)
	            //资格认证
	            //console.log(this.datadetails.creditNotifyModel.professionalCertsResult,9)
	            //上海社保  "socialSecurityStatus!='SUCCESS'"
//	            console.log(this.datadetails.creditNotifyModel.socialSecurityResult.queryState,10.1)
	            //上海社保
//	            console.log(this.datadetails.creditNotifyModel.socialSecurityResult,10)
	            //个人工商状态 "!entInfoStatus"
//	            console.log(this.datadetails.creditNotifyModel.entInfoResult.queryState,11)
	            //个人工商信息
//	            console.log(this.datadetails.creditNotifyModel.entInfoResult,12)
	            //网贷黑名单状态
//	            console.log(this.datadetails.creditNotifyModel.p2pBlackResult.queryState,13)
//	            console.log(this.datadetails.creditNotifyModel.p2pBlackResult,14)   
		    }
		}
	}
</script>

<style scoped>
	.details_wrapper{
	    padding-top: 45px;
	    height: 100%;
	    box-sizing: border-box;
	}
	
	.mo_mark {
		padding: 0 17px;
		height: 36px;
		line-height: 36px;
		color: #808080;
		border-bottom: 1px solid #EDEDED;
		border-left: 1px solid #EDEDED;
		border-right: 1px solid #EDEDED;
	}

	.abnormal_container-ios {
		height: 100%;
		box-sizing: border-box;
		padding-top: 65px;
		background: #f5f5f5;
	}

	.report_wrapper{
		display: flex;
		position: fixed;
		width: 100%;
		top: 55px;
		bottom: 0;
		background: #FFFFFF;
		overflow: hidden;
	}
	.report_container-ios{
		display: flex;
		position: fixed;
		width: 100%;
		top: 75px;
		bottom: 0;
		background: #FFFFFF;
		overflow: hidden;
	}
	.menu_wrapper{
		flex: 0 0 18.7%;
	}
	.menu_wrapper li{
		width: 100%;
		height: 81px;
		text-align: center;
		background: rgb(245,245,245);
		border-bottom: 1px solid #E0E0E0;
	}
	.details_list{
		flex: 1;
		padding: 15px 15px 0 15px;
	}
	.details_list li{
		list-style: none;
		padding-bottom: 10px;
	}
	.detail_img{
		width: 100%;
		padding:22px 0 10px 0;
		height: 14px;
	}
	.detail_img .icon{
		height: 14px;
		background: url(../../assets/img/reference/smallb_shenfen.png) no-repeat center;
		background-size: 22px 14px;
	}
	.detail_img_telephone{
		width: 100%;
		padding:23px 0 5px 0;
		height: 18px;
	}
	.detail_img_telephone .icon{
		height: 18px;
		background: url(../../assets/img/reference/smallb_tel.png) no-repeat center;
		background-size: 14px 18px;
	}
	.detail_img_crime{
		height: 20px;
		padding:19px 0 7px 0;
	}
	.detail_img_crime .icon{
		height: 20px;
		background: url(../../assets/img/reference/smallb_crime.png) no-repeat center;
		background-size: 18px 20px !important;
	}
	
.detail_img_crime .redBlack .icon {
	height: 20px;
	background: url(../../assets/img/reference/small_crime.png) no-repeat center;
	background-size: 18px 20px !important;
}

	
	.detail_img_remark{
		height: 20px;
		padding:19px 0 7px 0;
	}
	.detail_img_remark .icon{
		height: 20px;
		background: url(../../assets/img/reference/smallb_remark.png) no-repeat center;
		background-size: 18px 20px;
	}
	.detail_img_school{
		height: 15px;
		padding:21px 0 10px 0;
	}
	.detail_img_school .icon{
		height: 15px;
		background: url(../../assets/img/reference/smallb_school.png) no-repeat center;
		background-size: 20px 15px;
	}
	.detail_img_job{
		height: 16px;
		padding:24px 0 6px 0;
	}
	.detail_img_job .icon{
		height: 16px;
		background: url(../../assets/img/reference/smallb_job.png) no-repeat center;
		background-size: 18px 16px;
	}
	.detail_img_security{
		height: 19px;
		padding:21px 0 6px 0;
	}
	.detail_img_security .icon{
		height: 19px;
		background: url(../../assets/img/reference/smallb_job.png) no-repeat center;
		background-size: 17px 19px;
	}
	.detail_img_business{
		height: 19px;
		padding:21px 0 6px 0;
	}
	.detail_img_business .icon{
		height: 19px;
		background: url(../../assets/img/reference/smallb_business.png) no-repeat center;
		background-size: 17px 19px;
	}
	.detail_img_executed{
		height: 15px;
		padding:22px 0 9px 0;
	}
	.detail_img_executed .icon{
		height: 15px;
		background: url(../../assets/img/reference/smallb_executed.png) no-repeat center;
		background-size: 18px 15px;
	}
	
.detail_img_executed .redExcuted .icon {
	height: 15px !important;
	background: url(../../assets/img/reference/redExcuted.png) no-repeat center !important;
	background-size: 18px 15px !important;
}

	.detail_img_black{
		height: 18px;
		padding:22px 0 6px 0;
	}
	.detail_img_black .icon{
		height: 18px;
		background: url(../../assets/img/reference/smallb_black.png) no-repeat center;
		background-size: 18px 18px;
	}
	.detail_img_black .redBlack .icon{
		height: 18px;
		background: url(../../assets/img/reference/redBlack.png) no-repeat center;
		background-size: 18px 18px;
	}
	.currentt{
		border-left: 2px solid #F89721;
		box-sizing: border-box;
		background: #ffffff !important;
	}
	.currentt.scurcrime{
		border-left: 2px solid #FF624C !important;
		box-sizing: border-box;
		background: #ffffff !important;
	}
	.currentt .detail_text{
		color: #F89721;
	}
	.currentt.scurcrime .detail_text{
		color: #FF624C;
	}
	.currentt .detail_img .icon{
		background-image: url(../../assets/img/reference/small_shenfen.png);
	}
	.currentt .detail_img_telephone .icon{
		background-image: url(../../assets/img/reference/small_tele.png);
	}
	.currentt .detail_img_crime .icon{
		background-image: url(../../assets/img/reference/ssmallb_crime.png);
	}
	.currentt.scurcrime .detail_img_crime .icon{
		background-image: url(../../assets/img/reference/small_crime.png) !important;
	}
	.currentt .detail_img_remark .icon{
		background-image: url(../../assets/img/reference/small_remark.png);
	}
	.currentt .detail_img_school .icon{
		background-image: url(../../assets/img/reference/small_school.png);
	}
	.currentt .detail_img_job .icon{
		background-image: url(../../assets/img/reference/small_job.png);
	}
	.currentt .detail_img_security .icon{
		background-image: url(../../assets/img/reference/small_security.png);
	}
	.currentt .detail_img_business .icon{
		background-image: url(../../assets/img/reference/small_businell.png);
	}
	.currentt .detail_img_executed .icon{
		background-image: url(../../assets/img/reference/small_executed.png);
	}
	.currentt .detail_img_black .icon{
		background-image: url(../../assets/img/reference/small_black.png);
	}
	.detail_text{
		width: 100%;
		padding-bottom:20px;
		height: 14px;
		line-height: 14px;
		font-size: 1.2rem;
		color: #808080;
	}
	.height_none{
		height: 0 !important;
		border: none !important;
	}
	.nbsp{
		width: 100%;
		height: 300px;
	}
	.nopadding{
		padding-bottom: 0 !important;
	}
</style>